<template>
	<view>
		<nav-bar title="购物车"></nav-bar>
		<shop-cart ref="shopCart" :selectKey="selectKey" :cart-list="cartList" :select-cart-list="selectCartList"
			@operateCount="operateCount" @triggerSelect="triggerSelect" @triggerSelectAll="triggerSelectAll"
			@toDetail="toDetail" @submit="submit" @cartDelete="cartDelete"></shop-cart>
		<you-popup :popupVisible="tipDialog" :showTitle="false" @cancel="tipDialog = false"
			@popupClose="tipDialog = false" @confirm="confirmDelete">
			<template #popupContent>
				<view class="tip-content">确认要删除这个商品吗</view>
			</template>
		</you-popup>
	</view>
</template>

<script>
	import {
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: 'ShoppingCart',
		data() {
			return {
				tipDialog: false,
				selectKey: "id",
				storeId: '',
				selectCartList: [],
				cartList: [],
				selectedIndex: 0
			}
		},
		// computed: {
		// 	goodsAccount() {
		// 		let total = 0
		// 		this.chooseGoods.forEach(item => {
		// 			total = this.$utils.numberAdd(total, this.$utils.numberMul(item.price, item.carNum))
		// 		})
		// 		return total
		// 	}
		// },
		onLoad(options) {
			this.storeId = options.storeId
			this.safeHeight = this.$store.getters.heightData.safeHeight
			// this.getDataList()
		},
		onShow() {
			const shop_car = this.$store.getters.shop_car
			if (shop_car.cartList && shop_car.cartList.length > 0) {
				this.cartList = shop_car.cartList
				if (shop_car.selectCartList && shop_car.cartList.length > 0) {
					this.selectCartList = shop_car.selectCartList
				}
			}
			this.triggerSelectAll(false)
		},
		methods: {
			submit() {
				const selectList = this.cartList.filter((item) => this.selectCartList.includes(item[this.selectKey]))
				console.log('-submit-', selectList)
				this.$store.commit('SET_SETTLE', selectList)
				if (selectList.length > 0) {
					uni.navigateTo({
						url: `/subPages/store/confirmOrder?storeId=${this.storeId}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: `没有选择商品`,
						duration: 6000
					})
				}
			},
			toDetail(item) {
				console.log('-toDetail-', item)
			},
			cartDelete(index) {
				// const findIndex = this.selectCartList.findIndex(t => t === this.cartList[index][this.selectKey])
				// if (findIndex !== -1) {
				// 	this.selectCartList.splice(findIndex, 1)
				// }
				// this.cartList.splice(index, 1)
				// this.$nextTick(() => {
				// 	this.$refs.shopCart.calculatePrice()
				// })
				this.tipDialog = true
			},
			confirmDelete() {
				const findIndex = this.selectCartList.findIndex(t => t === this.cartList[this.selectedIndex][this
					.selectKey
				])
				if (findIndex !== -1) {
					this.selectCartList.splice(findIndex, 1)
				}
				this.tipDialog = false
				this.cartList.splice(this.selectedIndex, 1)
				this.$nextTick(() => {
					this.$refs.shopCart.calculatePrice()
				})
			},
			operateCount(params) {
				const {
					item,
					type
				} = params
				this.selectedIndex = params.index
				console.log(this.selectCartList)
				if (type === 'add') {
					this.cartList[params.index].count += 1
				} else if (type === 'del') {
					if (this.cartList[params.index].count > 1) {
						this.cartList[params.index].count -= 1
					} else {
						this.tipDialog = true
					}
				}
				this.$nextTick(() => {
					this.$refs.shopCart.calculatePrice()
				})
			},
			triggerSelect(item) {
				console.log(item)
				const findIndex = this.selectCartList.findIndex(t => t === item[this.selectKey])
				if (findIndex === -1) {
					this.selectCartList.push(item[this.selectKey])
				} else {
					this.selectCartList.splice(findIndex, 1)
				}
			},
			triggerSelectAll(selectAll) {
				if (selectAll) {
					this.selectCartList = []
				} else {
					this.selectCartList = this.cartList.map(item => item[this.selectKey])
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.goods-list {
		padding: 20rpx 28rpx;

		.data-item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			background-color: #FFF;

			.store-name {
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 500;
			}

			.goods-item {
				display: flex;
				margin-bottom: 20rpx;

				.choose-icon {
					display: flex;
					align-items: center;
					width: 40rpx;
					margin-right: 20rpx;
				}

				.left-img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 8rpx;
					overflow: hidden;

					.goods-img {
						width: 100%;
						height: 100%;
					}
				}

				.goods-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;
					flex: 1;
					margin-left: 10rpx;

					.goods-name {
						font-size: 26rpx;
						font-weight: 500;
					}

					.price {
						font-size: 26rpx;
						color: #EB2727;

						.icon {
							font-size: 20rpx;
						}
					}

					.number {
						margin-left: 25rpx;
						margin-right: 25rpx;
					}

					.update-btn {
						position: absolute;
						right: 0;
						bottom: 0;
						display: flex;
						align-items: center;

						.minus-btn,
						.add-btn {
							width: 40rpx;
							height: 40rpx;

							.btn-img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 10rpx 28rpx 0;
		align-items: center;
		width: 100%;
		border-top: 2rpx solid rgba(0, 0, 0, .1);
		background-color: #FFF;

		.choose-box {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #808080;
		}

		.text-box {
			flex: 1;
			margin-left: 46rpx;
			font-size: 24rpx;

			.account-icon {
				margin-left: 8rpx;
				color: #EB2727;
			}

			.account {
				color: #EB2727;
				font-size: 26rpx;
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: #FFF;
			background-color: #0b3f35;
		}
	}

	.tip-content {
		padding: 64rpx 0;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
	}
</style>